<template>
	<view>
		<view>
			<view class="content">
				<view class="item">
					<text class="item-title">残疾人姓名</text>
					<text class="item-title-red">*</text>
					<input class="input" placeholder='请输入残疾人姓名' v-model="params.disabledName" />
				</view>
				<view class="item">
					<text class="item-title">业务类别</text>
					<text class="item-title-red">*</text>
					<view>
						<picker @change="businessChange" :value="businessIndex" :range="businessList" range-key="name">
							<view class="businessPicker">
								<view>
									{{businessList[businessIndex].name||'请选择业务类别'}}
								</view>
								<tui-icon name="arrowdown" size="20"></tui-icon>
							</view>
						</picker>
					</view>
				</view>
				<view class="item">
					<text class="item-title">企业名称</text>
					<text class="item-title-red"></text>
					<input class="input" placeholder='请输入企业名称' v-model="params.enterpriseName" />
				</view>
				<view class="item">
					<text class="item-title">业务内容</text>
					<text class="item-title-red"></text>
					<input class="input" placeholder='请输入业务内容' v-model="params.businessContent" />
				</view>
				<view class="item">
					<text class="item-title">图片</text>
					<text class="item-title-red">*</text>
					<view class="tangUpload">
						<view class="ul">
							<view class="li" v-for="(item,index) in params.imgUrls" :key="index">
								<view>
									<image :src="item" mode="widthFix"></image>
									<view class="del" @click="delChoose(index)">
										<tui-icon name="close-fill" size="20" color="#eb0909"></tui-icon>
									</view>
								</view>
							</view>
							<view class="li" style="line-height: 200rpx;" @click="chooseUpdate()">
								<tui-icon name="plus" size="40"></tui-icon>
							</view>
						</view>
					</view>
				</view>
				<button class="btn" @click="onSubmit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		data() {
			return {
				id: '', // 新增 | 编辑 id
				params: {
					disabledName: "",
					businessType: "",
					businessContent: "",
					enterpriseId: "",
					enterpriseName: "",
					imgUrls: [],
				},
				
				businessIndex: 0,
				businessList: [{
					name: "文案宣传",
					value: 1
				},{
					name: "招聘转发",
					value: 2
				},{
					name: "直播间点赞",
					value: 3
				},{
					name: "客户公众号阅读与转发",
					value: 4
				}]
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.init();
		},
		methods: {
			// 初始化方法
			init() {
				this.params.imgUrls = [];
				this.params.businessType = this.businessList[this.businessIndex].value;
				this.getQueryUserData();
			},
			// 头像上传图片
			chooseUpdate(type) {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0]
						util.uploadFile('disabled/uploadNewFile', tempFilePaths, '企业宣传').then(function(resp) {
							that.params.imgUrls.push(resp.data);
						})
					}
				})
			},
			// 删除上传图片
			delChoose(i) {
				this.params.imgUrls.splice(i,1);
			},
			// 业务类别选择
			businessChange(e) {
				this.businessIndex = e.detail.value;
				this.params.businessType = this.businessList[this.businessIndex].value;
			},
			// 获取用户信息
			getQueryUserData() {
				util.request('disabled/queryUserData', {
					iphone: uni.getStorageSync('phone')||'',
				}, "POST").then(res => {
					if (res.code == 1) {
						this.params.disabledName = res.data.name;
						this.params.enterpriseName = res.data.enterpriseName;
					} 
				});
			},
			// 提交
			onSubmit() {
				if (!this.params.disabledName) {
					return util.toast("请输入残疾人姓名")
				}
				if (!this.params.businessType) {
					return util.toast("请选择业务类别")
				}
				if (this.params.imgUrls.length == 0) {
					return util.toast("请上传图片")
				}
				util.request('disabled/addBusiness', this.params, "POST").then(res => {
					if (res.code == 1) {
						util.toast('操作成功');
						setTimeout(() => {
							uni.navigateBack(-1);
						}, 1500)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F9FC;
	}
	.businessPicker {
		line-height: 66rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1rpx solid #EFEFEF;
		border-radius: 20rpx;
		margin: 16rpx 0 30rpx;
	}
	.content {
		background: #ffffff;
		font-size: 16px;
		border: 1rpx solid #ffffff;
		margin-top: 20rpx;
		margin-left: 3%;
		margin-right: 3%;
		padding: 20rpx;
	}

	.item {
		background: #ffffff;
		font-size: 28rpx;
		align-items: center;
		margin-top: 10rpx;
	}

	.item-title {
		height: 100rpx;
		color: #333333;

	}

	.item-title-red {
		height: 100rpx;
		color: #db0909;
	}

	.input {
		color: #333;
		border: 1rpx solid #EFEFEF;
		margin-top: 16rpx;
		margin-bottom: 30rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
		border-radius: 10px;
	}

	.input-hight {
		height: 160rpx;
		color: #494848;
		border: 1rpx solid #e0e0e0;
		margin-top: 16rpx;
		margin-bottom: 30rpx;
		padding: 10rpx;
		text-align: left;
		padding: 20rpx 20rpx 10rpx 20rpx;
		border-radius: 10px;
	}

	.btn {
		background-color: #eed1a4;
		color: #1A222D;
		margin-top: 50rpx;
		font-weight: normal;
		border-radius: 10px;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.containers .search {
		width: 100%;
		padding: 12.5rpx 0 12.5rpx 15rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		justify-content: center;
	}

	.containers .search-left {
		width: 90%;
		background: #fbfcfd;
		text-align: left;
		padding-left: 15rpx;
		padding-right: 10rpx;
		border-radius: 50rpx;
		margin-left: 16rpx;
		margin-right: 36rpx;
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		border: solid 1px #cfcfcf;
		color: #121212;
	}

	.containers .search-left input {
		display: inline-block;
		height: 60rpx;
		font-size: 30rpx;
		width: 60%;

	}

	.search-placeholder {
		color: #cacbcc;
		line-height: 20rpx;
	}

	.containers .search .search-left image {
		display: inline-block;
		width: 35rpx;
		height: 35rpx;
		padding: 20rpx 15rpx 15rpx 15rpx;
	}

	.containers .search .search-right {
		margin-top: 18rpx;
		margin-right: 10rpx;
	}

	.containers .search .search-right image {
		width: 45rpx;
		height: 45rpx;
		padding: 12rpx;
	}

	.containers .search-left text {
		background: #fbfcfd;
		font-size: 30rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-radius: 50rpx;
		border: solid 1px #cfcfcf;
		background-color: #202226;
		color: #ffffff;
	}
</style>